<template>
  <section class="playlist-box">
    <transition name="playlist-mask">
      <div
        v-if="playListState"
        class="playlist-mask"
        @click="$store.commit('audio/TOOGEL_PLAYLIST_STATE')"
      />
    </transition>
    <transition name="playlist-wrapper">
      <div
        v-if="playListState"
        class="playlist-wrapper"
      >
        <section
          class="wrapper-audio-box"
          v-for="(audio, index) in playList"
          :key="index"
        >
          <div class="wrapper-audio">
            <el-image
              class="audio-cover"
              :src="audio.cover"
              fit="cover"
            />
            <section class="audio-info-wrapper">
              <div class="audio-info">
                <div class="item-t-s audio-name"><span
                    :class="[{active: audio.name.length > 30}]"
                    v-html="audio.name"
                  />
                </div>
                <div class="item-t-s audio-artist">
                  <span
                    :class="[{active: audio.artist.length > 8}]"
                    v-html="audio.artist"
                  />
                </div>
              </div>
              <div class="audio-other">
                <div class="item-t-s audio-timer">{{audio.current}}</div>
              </div>
            </section>
          </div>
          <section class="wrapper-controller">
            <div
              :class="['item-t-s item-controller-btn item-prev iconfont', nowPlay.url===audio.url?'icon-ziyuanldpi6':'icon-ziyuanldpi11']"
              @click="$store.commit('audio/TOOGEL_NOW_PLAY',index)"
            />
            <div
              class="item-t-s item-controller-btn item-prev iconfont icon-shanchu"
              @click="$store.commit('audio/DELETE_PLAYLIST_ONECE', index)"
            />
            <div class="item-t-s item-controller-btn item-prev iconfont icon-ziyuanldpi2" />
          </section>
        </section>
      </div>
    </transition>
  </section>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['playListState', 'playList', 'nowPlay']),
  },
};
</script>

<style lang="less" scoped src="./styles/player-list.less" />
